<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="24">
            <a-form-model-item label="购货方单位(字典,内部公司)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buyerUnit">
              <a-input :disabled=formDisabled v-model="model.buyerUnit" placeholder="请输入购货方单位(字典,内部公司)"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="纳税人识别号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taxpayerIdNo">
              <a-input :disabled=formDisabled v-model="model.taxpayerIdNo" placeholder="请输入纳税人识别号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyAddress">
              <a-input :disabled=formDisabled v-model="model.companyAddress" placeholder="请输入单位地址"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="单位电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyTel">
              <a-input :disabled=formDisabled v-model="model.companyTel" placeholder="请输入单位电话"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="开户行" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankName">
              <a-input :disabled=formDisabled v-model="model.bankName" placeholder="请输入开户行"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="银行账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankAccountNo">
              <a-input :disabled=formDisabled v-model="model.bankAccountNo" :max-length="32" placeholder="请输入银行账号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="发票备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invoiceRemark">
              <a-input :disabled=formDisabled v-model="model.invoiceRemark" placeholder="请输入发票备注"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="附言" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="postscript">
              <a-input :disabled=formDisabled v-model="model.postscript" placeholder="请输入附言"  ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'ErpFinanceInvoiceExpensesForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
        },
        confirmLoading: false,
        validatorRules: {
        buyerUnit: [
            { required: true, message: '请输入购货方单位!', trigger: 'change'},
        ],
        taxpayerIdNo: [
            { required: true, message: '请输入纳税人识别号!', trigger: 'blur'},
        ],
        companyAddress: [
            { required: true, message: '请输入单位地址!', trigger: 'blur'},
        ],
        companyTel: [
            { required: true, message: '请输入单位电话!', trigger: 'blur'},
        ],
        bankName: [
            { required: true, message: '请输入开户行!', trigger: 'blur'},
        ],
        bankAccountNo: [
            { required: true, message: '请输入银行账号!', trigger: 'blur'},
        ],
        invoiceRemark: [
            { required: true, message: '请输入发票备注!', trigger: 'blur'},
        ],
        },
        url: {
          add: "/api/erp/finance/invoice/erpFinanceInvoiceExpenses/add",
          edit: "/api/erp/finance/invoice/erpFinanceInvoiceExpenses/edit",
          queryById: "/api/erp/finance/invoice/erpFinanceInvoiceExpenses/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.$refs["form"].clearValidate();
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
    }
  }
</script>
